<template>
  <out-line
    :position="position"
    :id="element.id"
    class="person-info"
    :padding="0"
    :width="500"
    :height="0"
    @closeLayer="closeLayer"
  >
    <div class="info">
      <Title title="企业信息" >
        <div class="title-right" @click="goEnterprise">一企一图</div>
      </Title>
      <nav-title leftTitle="基本信息" @goMore="goMore"></nav-title>
      <div class="grid">
        <div class="item box">
          <Info labelWidth="114" label="企业名称" :value="element.enterpriseName" />
        </div>
        <div class="item item-right">
          <Info labelWidth="114" label="法定代表人" :value="element.representative" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="联系电话" :value="element.phone" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="环保负责人" :value="element.epOfficer" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="联系电话" :value="element.epPhone" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="行业类别" :value="element.industryType" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="环保管理类别" :value="element.epType_dictText" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="生产状况" :value="element.estate_dictText" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="是否为园中园" :value="element.isParkEnterprise_dictText" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="是否为租赁企业" :value="element.isLeasingEnterprise_dictText" />
        </div>
        <div class="item">
          <Info labelWidth="114" label="一企一档" :value="element.anEnterprise_dictText" />
        </div>
        <div class="item border box">
          <Info labelWidth="114" label="企业地址" :value="element.address" />
        </div>

      </div>
      <div class="content">
        <a-tabs default-active-key="1" :tabBarGutter="0" @change="callback">
          <a-tab-pane key="1" tab="日常核查">
            <Table
              :hide="false"
              :data="dailyCheckData"
              :columns="dailyCheckColumns"
              :pagination="dailyCheckPagination"
              style="margin: 0 10px"
              @change="dailyCheckChange"
              @goMore="goTableMore('dailyList')"
            >
              <template slot="action" slot-scope="text">
                <span class="btns" @click="showDlayer(text, 'daily')"
                  ><img class="detail-image" :src="require('@assets/gis/detail.svg')"
                /></span>
              </template>
            </Table>
          </a-tab-pane>
          <a-tab-pane key="2" tab="雨污混接专项">
            <Table
              :hide="false" 
              :data="sewageCheckData"
              :columns="sewageCheckColumns"
              :pagination="sewageCheckPagination"
              style="margin: 0 10px"
              @change="sewageCheckChange"
              @goMore="goTableMore('sewageList')"
            >
              <template slot="action" slot-scope="text">
                <span class="btns" @click="showDlayer(text, 'sewage')"
                  ><img class="detail-image" :src="require('@assets/gis/detail.svg')"
                /></span>
              </template>
            </Table>
          </a-tab-pane>
          <a-tab-pane key="3" tab="投诉专项" force-render>
            <Table
              :hide="false"
              :data="complaintsCheckData"
              :columns="complaintsCheckColumns"
              :pagination="complaintsCheckPagination"
              style="margin: 0 10px"
              @change="complaintsCheckChange"
              @goMore="goTableMore('complaintList')"

            >
              <template slot="action" slot-scope="text">
                <span class="btns" @click="showDlayer(text, 'complaint')"
                  ><img class="detail-image" :src="require('@assets/gis/detail.svg')"
                /></span>
              </template>
            </Table>
          </a-tab-pane>
          <a-tab-pane key="4" tab="其他专项" force-render>
            <Table
              :data="otherCheckData"
              :columns="otherCheckColumns"
              :pagination="otherCheckPagination"
              style="margin: 0 10px"
              @change="otherCheckChange"
              @goMore="goTableMore('otherList')"
            >
              <template slot="action" slot-scope="text">
                <span class="btns" @click="showDlayer(text, 'other')"
                  ><img class="detail-image" :src="require('@assets/gis/detail.svg')"
                /></span>
              </template>
            </Table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </out-line>
</template>
<script>
  import Title from '@comp/gis/title'
  import OutLine from '@comp/gis/outline'
  import navTitle from '@comp/gis/navTitle'
  import Info from '@comp/gis/info'
  import Table from '@comp/gis/table'
  import {mapActions, mapState} from 'vuex'
  import {url} from '@views/gis/jumpUrl';

  import {complaintsCheckByEpId, dailyCheckByEpId, otherCheckByEpId, sewageCheckByEpId,} from '@/api/gis'

  export default {
  components: {
    Title,
    OutLine,
    navTitle,
    Info,
    Table,
  },
  props: {
    element: {
      type: Object,
      default: () => {},
    },
    position: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
     dailyCheckData: [], //日常核查
     dailyCheckColumns: [
        {
          title: '核查人',
          dataIndex: 'hcry_dictText',
          key: 'hcry_dictText',
        },
        {
          title: '开始时间',
          dataIndex: 'hcsds',
          key: 'hcsds',
        },
        {
          title: '结束时间',
          dataIndex: 'hcsde',
          key: 'hcsde',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
     dailyCheckPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      },
      sewageCheckData: [], //雨污混接专项
      sewageCheckColumns: [
        {
          title: '核查人',
          dataIndex: 'hcry_dictText',
          key: 'hcry_dictText',
        },
        {
          title: '开始时间',
          dataIndex: 'hcsds',
          key: 'hcsds',
        },
        {
          title: '结束时间',
          dataIndex: 'hcsde',
          key: 'hcsde',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      sewageCheckPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      },
      complaintsCheckData: [], //投诉专项
      complaintsCheckColumns: [
        {
          title: '核查人',
          dataIndex: 'hcry_dictText',
          key: 'hcry_dictText',
        },
        {
          title: '开始时间',
          dataIndex: 'hcsds',
          key: 'hcsds',
        },
        {
          title: '结束时间',
          dataIndex: 'hcsde',
          key: 'hcsde',
        },
        {
          title: '投诉类型',
          dataIndex: 'tslx_dictText',
          key: 'tslx_dictText',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      complaintsCheckPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      },
      otherCheckData: [], //其他投诉
      otherCheckColumns: [
        {
          title: '核查人',
          dataIndex: 'hcry_dictText',
          key: 'hcry_dictText',
        },
        {
          title: '开始时间',
          dataIndex: 'hcsds',
          key: 'hcsds',
        },
        {
          title: '结束时间',
          dataIndex: 'hcsde',
          key: 'hcsde',
        },
        {
          title: '核查类型',
          dataIndex: 'hclx_dictText',
          key: 'hclx_dictText',
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      otherCheckPagination: {
        total: 0,
        pageIndex: 1,
        pageSize: 5,
      },
    }
  },
  computed: {
    ...mapState(['fposition']),
  },
  methods: {
    ...mapActions(['deleteLayers', 'addDLayers']),
    //展示一企一档
    goEnterprise(){
      //展示D区图标数据
      let obj = {
        data: this.element,
        name: 'anEnterprise',
        position: {
          top: this.fposition.top + 'px',
          left: this.fposition.left + 'px',
        },
        key: `anEnterprise---${this.element.id}`,
      }
      this.addDLayers(obj)
    },
    goMore() {
      url.enterprise(this.element.id);
    },
    //表格更多跳转
    goTableMore(name){
      url[name]();
    },
    //关闭图层
    closeLayer() {
      this.deleteLayers(this.element.id)
    },
    //日常核查
    dailyCheckByEpId() {
      const params = {
        epId: this.element.id,
        pageNo: this.dailyCheckPagination.pageIndex,
        pageSize: this.dailyCheckPagination.pageSize,
      }
      dailyCheckByEpId(params).then((res) => {
        if (res.success) {
          const _data = res.result
          this.dailyCheckPagination.total = _data.total || 0
          this.dailyCheckData = _data.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分页
    dailyCheckChange(val) {
      this.dailyCheckPagination.pageIndex = val
      this.dailyCheckByEpId()
    },
    //雨污混接专项
    sewageCheckByEpId() {
      const params = {
        epId: this.element.id,
        pageNo: this.sewageCheckPagination.pageIndex,
        pageSize: this.sewageCheckPagination.pageSize,
      }
      sewageCheckByEpId(params).then((res) => {
        if (res.success) {
          const _data = res.result
          this.sewageCheckPagination.total = _data.total || 0
          this.sewageCheckData = _data.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分页
    sewageCheckChange(val) {
      this.sewageCheckPagination.pageIndex = val
      this.sewageCheckByEpId()
    },
    //投诉专项
    complaintsCheckByEpId() {
      const params = {
        epId: this.element.id,
        pageNo: this.complaintsCheckPagination.pageIndex,
        pageSize: this.complaintsCheckPagination.pageSize,
      }
      complaintsCheckByEpId(params).then((res) => {
        if (res.success) {
          const _data = res.result
          this.complaintsCheckPagination.total = _data.total || 0
          this.complaintsCheckData = _data.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分页
    complaintsCheckChange(val) {
      this.complaintsCheckPagination.pageIndex = val
      this.complaintsCheckByEpId()
    },
    //其他专项
    otherCheckByEpId() {
      const params = {
        epId: this.element.id,
        pageNo: this.otherCheckPagination.pageIndex,
        pageSize: this.otherCheckPagination.pageSize,
      }
      otherCheckByEpId(params).then((res) => {
        if (res.success) {
          const _data = res.result
          this.otherCheckPagination.total = _data.total || 0
          this.otherCheckData = _data.records
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //分页
    otherCheckChange(val) {
      this.otherCheckPagination.pageIndex = val
      this.otherCheckByEpId()
    },
    //tab切换
    callback(key) {
      this.key = key;
      //日常核查
      if (key == 1) {
        this.dailyCheckPagination.pageIndex = 1
        this.dailyCheckByEpId()
      }
      // 雨污混接专项
      else if (key == 2) {
        this.sewageCheckPagination.pageIndex = 1
        this.sewageCheckByEpId()
      }
      // 投诉专项
      else if (key == 3) {
        this.complaintsCheckPagination.pageIndex = 1
        this.complaintsCheckByEpId()
      }
      // 其他专项
      else if (key == 4) {
        this.otherCheckPagination.pageIndex = 1
        this.otherCheckByEpId()
      }
    },
    //展示d区图层
    showDlayer(record, type) {
      console.log(record)
      const data = record.text
      //数据进行跳转
      url[type](data.id);
    },
  },
  mounted() {
    //初始化数据
    this.dailyCheckByEpId()
  },
}
</script>
<style lang="less" scoped>
.info {
  padding-top: 12px;
  .title-right{
    margin-right: 10px;
    text-decoration: underline;
    cursor: pointer;
  }
  .grid {
    margin: 9px 21px;
    display: flex;
    flex-wrap: wrap;
    .item {
      width: 50%;
      border: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: none;
    }
    .box{
        width: 100%;
    }
    .border {
      border-top: none;
    }
    .item-right{
      border-right: none;
    }
  }
  .content {
    margin: 0 10px 20px;
  }
  .btns {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .detail-image {
    width: 16px;
    height: 16px;
    display: block;
    cursor: pointer;
  }
}
</style>